<template>
  <div class="recomment">
    <div class="img">
      <img
        src="	https://image-mall.gxptkc.com/m/resources/member/norecommend-title.png"
        alt=""
      />
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :offset="10"
    >
      <div>
        <GoodsView :data="recommentList" />
      </div>
    </van-list>
  </div>
</template>

<script>
import GoodsView from "@/components/GoodsView.vue";
//list列表，可以做触底加载
import Vue from "vue";
import { List } from "vant";

Vue.use(List);
export default {
  data() {
    return {
      recommentList: [],
      current: 1,
      //触底加载
      loading: false,
      finished: false,
    };
  },
  methods: {
    async onLoad() {
      this.loading = true;
      let res = await this.axios.get(
        `https://m-mall.gxptkc.com/v3/goods/front/goods/recommendList?queryType=cart&pageSize=8&current=${this.current}`
      );
      this.current += 1;
      this.recommentList = [...this.recommentList, ...res.data.data.list];
      this.loading = false;
      if (this.recommentList.length >= res.data.data.pagination.total) {
        this.finished = true;
      }
    },
  },
  async created() {
    let res = await this.axios.get(
      `https://m-mall.gxptkc.com/v3/goods/front/goods/recommendList?queryType=cart&pageSize=8&current=${this.current}`
    );
    this.current += 1;
    this.recommentList = res.data.data.list;
  },
  components: { GoodsView },
};
</script>

<style lang="scss" scoped>
.recomment {
  .img {
    text-align: center;
    img {
      width: 193rem;
      margin: 10rem 0;
    }
  }
}
</style>